<template>
  <div class='table flexBox'>
    <div class='spam_state flexBox'>
      <div class='left flexBox'>
        <el-button
          :type="btnState === 1 ? 'primary' : ''"
          size='mini'
          @click='hanbleTableChange(1)'
        >健康</el-button>
        <el-button
          :type="btnState === 2 ? 'primary' : ''"
          size='mini'
          @click='hanbleTableChange(2)'
        >合格</el-button>
        <el-button
          :type="btnState === 3 ? 'primary' : ''"
          size='mini'
          @click='hanbleTableChange(3)'
        >亚健康</el-button>
        <el-button
          :type="btnState === 4 ? 'primary' : ''"
          size='mini'
          @click='hanbleTableChange(4)'
        >不健康</el-button>
        <el-button
          :type="btnState === 5 ? 'primary' : ''"
          size='mini'
          @click='hanbleTableChange(5)'
        >沉默</el-button>
      </div>
      <div class='right'>
        <el-button type='primary' size='mini' @click="exportTable">导出列表</el-button>
      </div>
    </div>
    <div class='spam_table'>
      <!--表格内容栏-->
      <cs-table
        :table-data='tableData'
        :table-label='tableLabel'
        :loading='loading'
        :selection='selectionType'
        :table-option='tableOption'>
        <template slot='rank' slot-scope='scope'>
          <el-progress v-if='scope.row.rate >= 80' :text-inside='true' :stroke-width='18' :percentage='scope.row.rank' status='exception'></el-progress>
          <el-progress v-if='scope.row.rate < 80 && scope.row.rate >= 50' :text-inside='true' :stroke-width='18' :percentage='scope.row.rank' status='warning'></el-progress>
          <el-progress v-if='scope.row.rate < 50 && scope.row.rate >= 30' :text-inside='true' :stroke-width='18' :percentage='scope.row.rank' status='success'></el-progress>
          <el-progress v-if='scope.row.rate < 30 && scope.row.rate >= 0' :text-inside='true' :stroke-width='18' :percentage='scope.row.rank'></el-progress>
        </template>
        <template slot='rate' slot-scope='scope'>
          <span>{{scope.row.rate + '%'}}</span>
        </template>
      </cs-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[7, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: right;"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    pageNo: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 5
    },
    totalPage: {
      type: Number,
      default: 4
    }
  },
  components: {
    CsTable: () => import('@/components/cs-table')
  },
  data() {
    return {
      btnState: 1,
      loading: false,
      selectionType: 'index',
      tableLabel: [
        {
          label: '企业类别',
          param: 'type',
          align: 'center',
          minWidth: '20%',
          isShow: true
        },
        {
          label: '数量',
          param: 'num',
          align: 'center',
          minWidth: '12%',
          isShow: true,
          sortable: false
        },
        {
          label: '占比排名',
          param: 'rank',
          align: 'center',
          minWidth: '55%',
          sortable: false,
          slot: true,
          isShow: true
        },
        {
          label: '占比',
          param: 'rate',
          align: 'center',
          minWidth: '13%',
          sortable: false,
          slot: true,
          isShow: true
        }
      ],
      tableOption: {},
      tableData: [
        {
          type: '信息传输、计算机服务和软件业',
          num: '168',
          rank: 80,
          rate: '80'
        }, {
          type: '公共管理和社会组织',
          num: '136',
          rank: 65,
          rate: '65'
        }, {
          type: '农、林、收、渔',
          num: '84',
          rank: 40,
          rate: '40'
        }, {
          type: '租赁和商务服务业',
          num: '52',
          rank: 20,
          rate: '25'
        }
      ]
    }
  },
  methods: {
    // 导出列表
    exportTable() {
      this.$emit('exportTable')
    },
    // 健康类型点击
    hanbleTableChange(type) {
      this.btnState = type
      this.$emit('hanbleTableChange', type)
    },
    // 每页数
		sizeChangeHandle (val) {
			// this.chartParams.pageSize = val
      // this.chartParams.pageNo = 1
      // this.initData()
      this.$emit('sizeChangeHandle', val)
		},
		// 当前页
		currentChangeHandle (val) {
      // this.chartParams.pageNo = val
      // this.initData()
      this.$emit('currentChangeHandle', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.table {
  width: 100%;
  height: 60%;
  // background: darkcyan;
  .spam_state {
    width: 100%;
    height: 40px;
    flex-direction: row;
    .left {
      flex-direction: row;
    }
  }
  .spam_table {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>